<template>
	<view class="container">
		<!-- 搜索框 -->
		<SearchBar></SearchBar>

		<!-- 轮播图 -->
		<swiper autoplay circular indicator-dots class="swiper">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="item.image_src" mode="widthFix"></image>
			</swiper-item>
		</swiper>

		<!-- 导航 -->
		<view class="nav">
			<view class="nav-item" v-for="(item,index) in catitemsList" :key="index">
				<image :src="item.image_src"></image>
			</view>
		</view>

		<!-- 楼层 -->
		<view class="floor">
			<view class="floor-item" v-for="(item,index) in floorList" :key="index">
				<view class="floor-pic">
					<image :src="item.floor_title.image_src" mode="widthFix"></image>
				</view>
				<view class="floor-content" v-if="item.product_list">
					<image :src="it.image_src" v-for="(it,index) in item.product_list" :key="index"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import SearchBar from '@/components/SearchBar'
export default {
	data() {
		return {
			swiperList:[],
			catitemsList:[],
			floorList:[]
		}
	},
	components:{
        SearchBar 
	},
	methods: {
		loadSwiper(){
			uni.request({
			  url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'
			}).then(res => {
				this.swiperList = res[1].data.message;
			});
		},
		loadCatitemsList(){
			this.request({
			  url: '/home/catitems'
			}).then(res => {
				this.catitemsList = res;
			})
		},
		loadFloor(){
			this.request({
			  url: '/home/floordata'
			}).then(res => {
				this.floorList = res;
			})
		}
	},
	// 页面加载时调用
	onLoad() {
		// Promise.all([this.loadSwiper(),this.loadCatitemsList(),this.loadFloor()]).then(() => {
        //     uni.hideLoading();
		// });
		this.requestAll([this.loadSwiper(),this.loadCatitemsList(),this.loadFloor()]);
	}
}
</script>

<style lang="scss">
.swiper{
	height:340rpx;
}
.nav{
	display: flex;
	margin:20rpx 0 40rpx;
	.nav-item{
		flex:1;
		display:flex;
		justify-content: center;
		align-items: center;
		image{
			width:120rpx;
			height: 140rpx;
	    }
	}
}
.floor-item{
	margin-bottom: 40rpx;
}
.floor-content{
	overflow: hidden;
	padding:0 10rpx;
	image{
		float: left;
		width:32%;
		border:2px solid $uni-bg-color;
		height:240rpx;
		&:first-child{
			height:480rpx;
		}
	}
}
</style>
